<template>
  <div  class="hb">
    换个名字:{{ titls}}
    <button @click="open">点击子传父通信</button>
  </div>
</template>

<script>
export default {
  // 所有的 props 都遵循着单向绑定原则，
  // props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递
  // 父传子通信： 3.在子组件里面接收父组件传来的属性使用props
  // props:["titls"],
  // props完整写法
  props:{
    titls:{
      //js 数据类型
      type:String,
      // 非空判断 是否能为空
      // required:true,
      // 默认值 默认显示什么值
      // default:'请修改',
      // 自定义效验
      validator(value){
        // 自定义效验逻辑 可以自己根据传进来的设置逻辑
        console.log(typeof(value),value);
           if(typeof(value) === 'string'){
            return true
           }else{
            console.error("不是string类型....")
            return false
           }
      }
    }
       
  },
  methods:{
    // 子传父 1. 使用$emit('父组件同名事件名'，'需要传给父的信息（这里是改成韩立）')
    open(){
      this.$emit('start',"韩立")
    }
  }
}
</script>

<style>
.hb{
  width: 300px;
  height: 50px;
  border: 3px solid black;
  line-height: 50px;
  margin: 0 auto;;
}
</style>